<html>
  <head>
    <script type="module" src="./div-3.js"></script>

    <style>
      .div2 {
        background-color: blue;
        font-family: Roboto;
        --custom-color: #e26dd2;
        --otherCustomColor: #77e26d;
      }
      .custom {
        color: var(--custom-color);
      }
      .othercustom {
        color: var(--otherCustomColor);
      }
    </style>
  </head>
  <body>
    <div style="
      background-color:blue;
      font-family:Roboto;
      --custom-color:#e26dd2;
      --otherCustomColor:#77e26d;">
      <h3>Div 1</h3>
      <p>Styled with inline styles</p>
      <p style="color:var(--custom-color);">A paragraph using <code>--custom-color</code></p>
      <p style="color:var(--otherCustomColor);">A paragraph using <code>--otherCustomColor</code></p>
    </div>

    <div class="div2">
      <h3>Div 2</h3>
      <p>Styled with CSS</p>
      <p class="custom">A paragraph using <code>--custom-color</code></p>
      <p class="othercustom">A paragraph using <code>--otherCustomColor</code></p>
    </div>

    <div-3></div-3>

  </body>
</html>
